@require "./public/_mixin.styl";
#word{
    position: relative;
    width 95%
    height 92%
    background-color: #ddd;
    @media screen and (max-width:640px) {
        width 100%
        height 100%
    }
    .loading{
        position: absolute;
        width 250px
        height 100px
        top: 50%;
        left: 50%;
        margin-left: -(@width/2)
        margin-top: -(@height/2)
        >h3{
            font-size: 15px;
            text-align: center;
            color: #fff;
            margin-bottom: 18px;
        }
        >img{
            margin: 0 auto;
        }
        >p{
            color: #4797fb;
            text-align: center;
            padding-top: 20px;
        }
    }
    header{
        position absolute;
        top 23px
        left 50%
        width 97%
        height 88px
        margin-left -(@width/2)
        @media screen and (max-width:640px) {
            position fixed;
        }
        @extend $opacityAminate;

        @media screen and (max-width:1366px) {
            width: 95%;
            margin-left: -(@width/2);
        }
        @media screen and (max-width:640px) {
            height 50px
        }
        a{
            position: absolute;
            top: 16px;
            right: 0;
            display: block;
            height 35px
            font-size: 15px;
            border: 1px solid #fff;
            border-radius: 5px;
            color: #fff;
            line-height: 35px;
            @media screen and (max-width:640px) {
                top: 0px;
                height 35px
            }
            &#fbShare{
                width 100px
                background-image: url("../images/fbicon.png");
                background-repeat: no-repeat;
                background-position: 17px 8px;
                padding-left: 45px;
                @media screen and (max-width:640px) {
                    width 90px
                    background-position: 10px 8px;
                    padding-left: 35px;
                }
            }
            &#createTree{
                width auto
                padding: 0 20px;
            }
        }
        div.userBlogData{
            width: 50%;
            height 100%
            display flex
            justify-content flex‐start
            img{
                width auto
                height 100%
                border-radius 50%
            }
            @media screen and (max-width:640px) {
                width: 70%;
            }
            >.text{
                height 100%
                padding-top: 14px;
                padding-left: 18px;
                @media screen and (max-width:640px) {
                    padding-top: 9px;
                    padding-left: 9px;
                }
                h1{
                    font-size: 20px;
                    font-weight: bold;
                    color: #fff;
                    @media screen and (max-width:640px) {
                        font-size: 3.1vw;
                    }
                }
                p{
                    font-size: 15px;
                    color: #4797fb;
                    padding-top: 7px;
                    letter-spacing: 1px;
                    font-weight: 500;
                    @media screen and (max-width:640px) {
                        font-size: 2.3vw;
                    }
                    >span{
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    canvas{
        display block
        width 100%
        height auto
    }
    footer{
        position absolute;
        bottom 23px
        left 50%
        width 98%
        height auto;
        margin-left -(@width/2)
        display: flex;
        justify-content: center;
        align-items: stretch;
        @extend $opacityAminate;

        @media screen and (max-width: 1366px) {
            width: 95%;
            margin-left: -(@width/2);
        }         
        @media screen and (max-width:640px) {
            position fixed;
        }
        .tagBox{
            width 50%
            >h3{
                line-height: 20px;
                font-size: 15px;
                font-weight: normal;
                color: #fff;
                margin-bottom: 17px;
                @media screen and (max-width:640px) {
                    font-size: 2.3vw;
                    margin-bottom: 10px;
                }
                &::before{
                    content:"";
                    display: block;
                    width 14px
                    height 20px
                    background-image: url("../images/tag.png");
                    background-position: 0 50%;
                    float: left;
                    background-repeat: no-repeat;
                    margin-right: 5px;
                }
            }
            >p{
                font-family: 'raleway', sans-serif;
                font-size: 35px;
                font-weight: 100;
                color: #fff;
                @media screen and (max-width:640px) {
                    font-size: 5.4vw;
                }
            }
        }
        .kmBox{
            position: relative;
            width 50%
            div{
                position: absolute;
                bottom: 0;
                right: 0;
                >h1{
                    font-size: 30px;
                    font-family: "Arial", sans-serif;
                    color: #fff;
                    float: right;
                    @media screen and (max-width:640px) {
                        font-size: 4.6vw;
                    }
                }
                >p{
                    font-family: 'raleway', sans-serif;
                    font-size: 35px;
                    font-weight: 100;
                    color: #fff;
                    text-align: right;
                    @media screen and (max-width:640px) {
                        font-size: 5.4vw;
                    }
                }
            }
        }
    }
}
a.logo{
    position: fixed
    top: 1%
    left: 50%
    display block
    width 74px
    height 18px
    margin-left: -(@width/2)
    background-image: url(../images/logo.png)
    @media screen and (max-width:640px) {
        display: none;
    }
}
p.Copyright{
    display: block;
    width 100%
    height: auto;
    overflow: hidden;
    text-align: center;
    position: fixed
    bottom: 1%
    left: 0%
    font-size: 13px;
    color: #959595;
    @media screen and (max-width:1000px) {
        font-size: 1.3vw;
    }
    @media screen and (max-width:640px) {
        display: none;
    }
}